<template>
  <div class="detail-container">
    <SubscribeTips v-if="isShowSubTips" @close="isShowSubTips = false" />
    <!-- 简介 -->
    <Synopsis :id="subPool.id" title="股池简介" :content="description" :videoUrl="videoUrl"></Synopsis>
    <!-- 股票池 -->
    <section class="detail-gpc">
      <div class="title">股票池</div>
      <atom-tabs v-model="activeTab" type="card" ref="tabs" sticky>
        <atom-tab v-for="pool in pools" :title="pool.name" :key="pool.key">
          <component :is="pool.component" @openSubPopup="openSubPopup" :showTackpoolPop="showTackpoolPop" @hasShow="showTackpoolPop = false"></component>
        </atom-tab>
      </atom-tabs>
    </section>
    <!-- 客服组件 -->
    <CustomerService></CustomerService>
    <template v-if="isNewSub">
      <Subscribe :projectId="projectId" :isHome="false" :checkTrackPool="true" @setActiveTab="setActiveTab"></Subscribe>
    </template>
    <template v-else>
      <!-- 自定义订阅，后期替换为上面订阅组件 -->
      <SubscribeComponent
        :pool="subPool"
        :isHome="false"
        @setActiveTab="setActiveTab"
        @setSubGpcId="showSub"
        @closeSubTips="isShowSubTips = false"
      />
      <SubscribePopup
        :isShow="isShowSub"
        :gpcId="subPool.id"
        @updateIsShow="updateIsShow"
        @updateSubscribe="updateSubscribe"
      />
    </template>
  </div>
</template>

<script>
import { POOL_TABS, POOL_LIST, VIDEO_LIST} from '@/config/pool';
import JuniorPool from '@/views/detail/JuniorPool.vue';
import SelectedPool from '@/views/detail/SelectedPool.vue';
import TrackingPool from '@/views/detail/TrackingPool.vue';
import Synopsis from '@/components/Synopsis.vue';
import CustomerService from '@/components/common/CustomerService';
import SubscribeComponent from '@/components/home/Subscribe.vue';
import SubscribePopup from '@/components/common/SubScribePopup.vue';
import SubscribeTips from '@/components/detail/SubscribeTips.vue';
import Subscribe from '@/components/Subscribe.vue';
import tools from '@/lib/tools.js';


export default {
  components: {
    TrackingPool,
    SelectedPool,
    JuniorPool,
    CustomerService,
    SubscribeComponent,
    SubscribePopup,
    SubscribeTips,
    Synopsis,
    Subscribe
  },
  data() {
    return {
      pools: Object.values(POOL_TABS),
      subPool: {},
      activeTab: 2,
      description: '',
      isShowSub: false,
      isShowSubTips: false,
      needTips: false,
      // 显示跟踪池定制弹窗
      showTackpoolPop: false,
      // 是否使用新版订阅组件
      isNewSub: false,
      // 新订阅组件projectId
      projectId: 0,
      // 简介视频地址
      videoUrl:''
    };
  },
  created() {
    this.initPoolInfo();
  },
  methods: {
    // 初始化股池基本信息
    initPoolInfo() {
      const product = window.getParam('product');
      const gpcId = window.getParam('gpc_id');
      this.videoUrl = VIDEO_LIST[gpcId]?.url || '';
      // 服务包股池采用新订阅组件
      if (product === 'fwb') {
        this.isNewSub = true;
      }
      this.subPool = {
        isSubscribed: +window.getParam('isSub'),
        id: +gpcId
      };
      if (window.getParam('tab')) {
        this.activeTab = Number(window.getParam('tab'));
      }
      try {
        // 股池简介
        this.description = POOL_LIST[product][gpcId].desc;
        // 订阅id
        this.projectId = POOL_LIST[product][gpcId].subId;
        tools.setTitle(POOL_LIST[product][gpcId].name || '股票池详情');
      } catch(err) {
        _t.errorReport({
          category: 'js',
          name: '股池对应参数异常',
          message: `product: ${product},gpcId: ${gpcId}`,
          stack: err,
        });
      }
    },
    // 订阅弹框开启或关闭
    updateIsShow(isShowSub, isConfirm) {
      this.isShowSub = isShowSub;
      this.isShowSubTips = !isShowSub && !isConfirm && this.needTips;
      this.needTips = false;
    },
    // 首次定制自动打开订阅弹框
    openSubPopup() {
      this.showSub();
      this.needTips = true;
    },
    // 更新订阅信息
    updateSubscribe(isSub) {
      this.subPool.isSubscribed = isSub;
    },
    // 展开订阅弹框
    showSub() {
      this.isShowSub = true;
    },
    setActiveTab(targetTab) {
      this.activeTab = targetTab;
      // 手动调用滑块样式 - 组件bug
      this.$refs.tabs.setSliderStyle();
      this.showTackpoolPop = true;
    },
  },
};
</script>

<style lang="less" scoped>
// 吸顶
/deep/ .atom-tabs__wrap-container {
  padding-top: 8px;
  padding-bottom: 8px;
}

/deep/ .atom-sticky--fixed .atom-tabs__wrap-container {
  background: var(--bg-color-2);
}

// 展开收起
.btn {
  margin-left: 10px;
  color: #4167d9;
  &.open {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.detail-container {
  background: var(--bg-color-1);
  padding: 8px 6px;
}

section {
  background: var(--bg-color-2);
  border-radius: 6px;
  padding: 12px 10px;
  margin-bottom: 8px;
  .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-1);
  }
}
.calendar_prop {
  position: absolute;
  right: 0.2rem;
  top: -0.3rem;
}
.fade-in {
  opacity: 1;
  max-height: 8.8rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.fade-out {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.chart_line {
  width: 7rem;
  height: 4rem;
}
// 股票简介
.detail-desc {
  .clamp {
    font-size: 14px;
    color: var(--text-2);
    letter-spacing: 0;
    line-height: 22px;
    text-align: justify;
    white-space: pre-wrap;
    position: relative;
  }
  .clamp-close {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    width: calc(100% - 28px);
  }
  .close_and_up span:nth-child(2) {
    font-size: 0.26rem;
  }
  .close_and_up span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
    margin-bottom: 0.07rem;
  }
}

.detail-gpc {
  position: relative;
  /deep/ .insustry_layout_wrapper_no_data {
    width: 93.6%;
    background-color: transparent;
  }
}

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

/* D3Chart的toolTip 放到calendar组件下面 */
.chart_line /deep/ .d3charts-tooltip {
  z-index: 1999 !important;
}
</style>
